| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341 |
| /**
* @ngdoc directive
* @name patternfly.wizard.component:pfWizard
* @restrict E
*
* @description
* Component for rendering a Wizard modal. Each wizard dynamically creates the step navigation both in the header and the left-hand side based on nested steps.
* Use pf-wizard-step to define individual steps within a wizard and pf-wizard-substep to define portions of pf-wizard-steps if so desired. For instance, Step one can have two substeps - 1A and 1B when it is logical to group those together.
* <br /><br />
* The basic structure should be:
* <pre>
* <pf-wizard>
* <pf-wizard-step>
* <pf-wizard-substep><!-- content here --></pf-wizard-substep>
* <pf-wizard-substep><!-- content here --></pf-wizard-substep>
* </pf-wizard-step>
* <pf-wizard-step><!-- additional configuration can be added here with substeps if desired --></pf-wizard-step>
* <pf-wizard-step><!-- review steps and final command here --></pf-wizard-step>
* </pf-wizard>
* </pre>
*
* @param {string} wizardTitle The wizard title displayed in the header
* @param {boolean=} hideIndicators Hides the step indicators in the header of the wizard
* @param {boolean=} activeStepTitleOnly Shows the title only for the active step in the step indicators, optional, default is false.
* @param {boolean=} hideSidebar Hides page navigation sidebar on the wizard pages
* @param {boolean=} hideHeader Optional value to hide the title bar. Default is false.
* @param {boolean=} hideBackButton Optional value to hide the back button, useful in 2 step wizards. Default is false.
* @param {string=} stepClass Optional CSS class to be given to the steps page container. Used for the sidebar panel as well unless a sidebarClass is provided.
* @param {string=} sidebarClass Optional CSS class to be give to the sidebar panel. Only used if the stepClass is also provided.
* @param {string=} contentHeight The height the wizard content should be set to. This is used ONLY if the stepClass is not given. This defaults to 300px if the property is not supplied.
* @param {boolean=} hideIndicators Hides the step indicators in the header of the wizard
* @param {string=} currentStep The current step can be changed externally - this is the title of the step to switch the wizard to
* @param {string=} cancelTitle The text to display on the cancel button
* @param {string=} backTitle The text to display on the back button
* @param {string=} nextTitle The text to display on the next button
* @param {function(step)=} backCallback Called to notify when the back button is clicked
* @param {function(step)=} nextCallback Called to notify when the next button is clicked
* @param {function()=} onFinish Called to notify when when the wizard is complete. Returns a boolean value to indicate if the finish operation is complete
* @param {function()=} onCancel Called when the wizard is canceled, returns a boolean value to indicate if cancel is successful
* @param {boolean} wizardReady Value that is set when the wizard is ready
* @param {boolean=} wizardDone Value that is set when the wizard is done
* @param {string} loadingWizardTitle The text displayed when the wizard is loading
* @param {string=} loadingSecondaryInformation Secondary descriptive information to display when the wizard is loading
* @param {boolean=} embedInPage Value that indicates wizard is embedded in a page (not a modal). This moves the navigation buttons to the left hand side of the footer and removes the close button.
* @param {function(step, index)=} onStepChanged Called when the wizard step is changed, passes in the step and the step index of the step changed to
* @deprecated {string} title The wizard title displayed in the head (use wizardTitle instead)
* @example
<example module="patternfly.wizard" deps="patternfly.form">
<file name="index.html">
<div ng-controller="WizardModalController">
<button ng-click="openWizardModel()" class="btn btn-default">Launch Wizard</button>
</div>
</file>
<file name="wizard-container.html">
<pf-wizard wizard-title="Wizard Title"
wizard-ready="wizardReady"
on-finish="finishedWizard()"
on-cancel="cancelDeploymentWizard()"
next-title="nextButtonTitle"
next-callback="nextCallback"
back-callback="backCallback"
wizard-done="deployComplete || deployInProgress"
sidebar-class="example-wizard-sidebar"
step-class="example-wizard-step"
loading-secondary-information="secondaryLoadInformation"
on-step-changed="stepChanged(step, index)">
<pf-wizard-step step-title="First Step" next-tooltip="firstStepNextTooltip" prev-tooltip="firstStepPrevTooltip" substeps="true" step-id="details" step-priority="0" show-review="true" show-review-details="true">
<div ng-include="'detail-page.html'">
</div>
<pf-wizard-substep step-title="Details - Extra" next-enabled="true" step-id="details-extra" step-priority="1" show-review="true" show-review-details="true" review-template="review-second-template.html">
<form class="form-horizontal">
<pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
<input id="new-lorem" name="lorem" ng-model="data.lorem" type="text" required/>
</pf-form-group>
<pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
<input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
</pf-form-group>
</form>
</pf-wizard-substep>
</pf-wizard-step>
<div ng-include="'second-step.html'">
</div>
<pf-wizard-step step-title="Review" next-tooltip="reviewStepNextTooltip" prev-tooltip="reviewStepPrevTooltip" substeps="true" step-id="review" step-priority="2">
<div ng-include="'summary.html'"></div>
<div ng-include="'deployment.html'"></div>
</pf-wizard-step>
</pf-wizard>
</file>
<file name="detail-page.html">
<div ng-controller="DetailsGeneralController">
<pf-wizard-substep step-title="General"
next-enabled="detailsGeneralComplete"
step-id="details-general"
step-priority="0"
on-show="onShow"
focus-selectors="focusSelectors"
review-template="{{reviewTemplate}}"
show-review-details="true">
<form class="form-horizontal">
<pf-form-group pf-label="Name" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
<input id="new-name" name="name" ng-model="data.name" type="text" ng-change="updateName()" required/>
</pf-form-group>
<pf-form-group pf-label="Description" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
<input id="new-description" name="description" ng-model="data.description" type="text" />
</pf-form-group>
</form>
</pf-wizard-substep>
</div>
</file>
<file name="review-template.html">
<div ng-controller="DetailsReviewController">
<form class="form">
<div class="wizard-pf-review-item">
<span class="wizard-pf-review-item-label">Name:</span>
<span class="wizard-pf-review-item-value">{{data.name}}</span>
</div>
<div class="wizard-pf-review-item">
<span class="wizard-pf-review-item-label">Description:</span>
<span class="wizard-pf-review-item-value">{{data.description}}</span>
</div>
</form>
</div>
</file>
<file name="review-second-template.html">
<div ng-controller="DetailsReviewController">
<form class="form">
<div class="wizard-pf-review-item">
<span class="wizard-pf-review-item-label">Lorem:</span>
<span class="wizard-pf-review-item-value">{{data.lorem}}</span>
</div>
<div class="wizard-pf-review-item">
<span class="wizard-pf-review-item-label">Ipsum:</span>
<span class="wizard-pf-review-item-value">{{data.ipsum}}</span>
</div>
</form>
</div>
</file>
<file name="second-step.html">
<div ng-controller="SecondStepController">
<pf-wizard-step focus-selectors="focusSelectors" step-title="Second Step" next-tooltip="secondStepNextTooltip" prev-tooltip="secondStepPrevTooltip" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="review-second-template.html" >
<form class="form-horizontal">
<h3>Wizards should make use of substeps consistently throughout (either using them or not using them). This is an example only.</h3>
<pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
<input id="step-two-new-lorem" name="lorem" ng-model="data.lorem" type="text"/>
</pf-form-group>
<pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
<input id="step-two-new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
</pf-form-group>
</form>
</pf-wizard-step>
</div>
</file>
<file name="summary.html">
<div ng-controller="SummaryController">
<pf-wizard-substep step-title="Summary" step-id="review-summary" step-priority="0" next-enabled="true" prev-enabled="true" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
<pf-wizard-review-page shown="pageShown" wizard-data="data"></pf-wizard-review-page>
</pf-wizard-substep>
</div>
</file>
<file name="deployment.html">
<div ng-controller="DeploymentController">
<pf-wizard-substep step-title="Deploy" step-id="review-progress" step-priority="1" next-enabled="true" prev-enabled="false" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
<div class="wizard-pf-contents" ng-controller="DeploymentController">
<div class="wizard-pf-process blank-slate-pf" ng-if="!deploymentComplete">
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
<h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet. </p>
</div>
<div class="wizard-pf-complete blank-slate-pf" ng-if="deploymentComplete">
<div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
<h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet. </p>
<button type="button" class="btn btn-lg btn-primary">View Deployment</button>
</div>
</div>
</pf-wizard-substep>
</div>
</file>
<file name="script.js">
angular.module('patternfly.wizard').controller('WizardModalController', ['$scope', '$timeout', '$uibModal', '$rootScope',
function ($scope, $timeout, $uibModal, $rootScope) {
$scope.openWizardModel = function () {
var wizardDoneListener,
modalInstance = $uibModal.open({
animation: true,
backdrop: 'static',
templateUrl: 'wizard-container.html',
controller: 'WizardController',
size: 'lg'
});
var closeWizard = function (e, reason) {
modalInstance.dismiss(reason);
wizardDoneListener();
};
modalInstance.result.then(function () { }, function () { });
wizardDoneListener = $rootScope.$on('wizard.done', closeWizard);
};
}
]);
angular.module('patternfly.wizard').controller('WizardController', ['$scope', '$timeout', '$rootScope',
function ($scope, $timeout, $rootScope) {
var initializeWizard = function () {
$scope.data = {
name: '',
description: '',
lorem: 'default setting',
ipsum: ''
};
$scope.secondaryLoadInformation = 'ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet.';
$scope.wizardReady = false;
$timeout(function () {
$scope.wizardReady = true;
}, 1000);
$scope.nextButtonTitle = "Next >";
};
var startDeploy = function () {
$timeout(function() { }, 10000);
$scope.deployInProgress = true;
};
$scope.data = {};
$scope.firstStepNextTooltip = "First step next";
$scope.firstStepPrevTooltip = "First step back";
$scope.secondStepNextTooltip = "Second step next";
$scope.secondStepPrevTooltip = "Second step back";
$scope.reviewStepNextTooltip = "Review step next";
$scope.reviewStepPrevTooltip = "Review step back";
$scope.nextCallback = function (step) {
// call startdeploy after deploy button is clicked on review-summary tab
if (step.stepId === 'review-summary') {
startDeploy();
}
return true;
};
$scope.backCallback = function (step) {
return true;
};
$scope.stepChanged = function (step, index) {
if (step.stepId === 'review-summary') {
$scope.nextButtonTitle = "Deploy";
} else if (step.stepId === 'review-progress') {
$scope.nextButtonTitle = "Close";
} else {
$scope.nextButtonTitle = "Next >";
}
};
$scope.cancelDeploymentWizard = function () {
$rootScope.$emit('wizard.done', 'cancel');
};
$scope.finishedWizard = function () {
$rootScope.$emit('wizard.done', 'done');
return true;
};
initializeWizard();
}
]);
angular.module('patternfly.wizard').controller('DetailsGeneralController', ['$rootScope', '$scope',
function ($rootScope, $scope) {
'use strict';
$scope.reviewTemplate = "review-template.html";
$scope.detailsGeneralComplete = false;
$scope.focusSelectors = ['#new-name'];
$scope.onShow = function() { };
$scope.updateName = function() {
$scope.detailsGeneralComplete = angular.isDefined($scope.data.name) && $scope.data.name.length > 0;
};
}
]);
angular.module('patternfly.wizard').controller('DetailsReviewController', ['$rootScope', '$scope',
function ($rootScope, $scope) {
'use strict';
// Find the data!
var next = $scope;
while (angular.isUndefined($scope.data)) {
next = next.$parent;
if (angular.isUndefined(next)) {
$scope.data = {};
} else {
$scope.data = next.$ctrl.wizardData;
}
}
}
]);
angular.module('patternfly.wizard').controller('SecondStepController', ['$rootScope', '$scope',
function ($rootScope, $scope) {
'use strict';
$scope.focusSelectors = ['.invalid-classname', '#step-two-new-lorem'];
}
]);
angular.module('patternfly.wizard').controller('SummaryController', ['$rootScope', '$scope', '$timeout',
function ($rootScope, $scope, $timeout) {
'use strict';
$scope.pageShown = false;
$scope.onShow = function () {
$scope.pageShown = true;
$timeout(function () {
$scope.pageShown = false; // done so the next time the page is shown it updates
});
}
}
]);
angular.module('patternfly.wizard').controller('DeploymentController', ['$rootScope', '$scope', '$timeout',
function ($rootScope, $scope, $timeout) {
'use strict';
$scope.onShow = function() {
$scope.deploymentComplete = false;
$timeout(function() {
$scope.deploymentComplete = true;
}, 2500);
};
}
]);
</file>
</example>
*/
|